Learn JavaScript step by step and build interactive, dynamic webpages.
22th August, 2026
Introduction to JavaScript
Understand JavaScript and how it works with HTML and CSS.
What You Will Learn
- What is JavaScript?
- JavaScript vs HTML vs CSS
- Where JavaScript is used
- Client-side JavaScript
- How to add JavaScript to HTML
JavaScript Example
<script>
alert("Welcome to JavaScript!");
</script>External JavaScript File
<script src="script.js"></script>Variables
Variables are used to store data.
JavaScript provides three keywords for declaring variables:
Example
let name = "Ram";
let age = 25;
const website = "My Website";
console.log(name);
console.log(age);let and const.
Understand var mainly for older JavaScript code.
Data Types
Learn how JavaScript stores different types of values.
Examples
let name = "Ram"; // String
let age = 25; // Number
let isActive = true; // Boolean
let data = null; // Null
let value; // UndefinedPrimitive
String, Number, Boolean, Null, Undefined
Object
Stores related key-value data.
Array
Stores multiple values.
Operators
Perform calculations, comparisons and logical operations.
Arithmetic Operators
let a = 10;
let b = 5;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);| Operator | Meaning |
|---|---|
+ |
Addition |
- |
Subtraction |
* |
Multiplication |
/ |
Division |
% |
Modulus |
** |
Power |
Comparison Operators
let age = 20;
console.log(age >= 18);
Learn:
==,
===,
!=,
!==,
>,
<,
>=,
<=
== and ===.
Conditional Statements
Execute different code based on conditions.
if
let age = 20;
if (age >= 18) {
console.log("Eligible");
}if...else
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}else if
let marks = 75;
if (marks >= 90) {
console.log("Grade A");
} else if (marks >= 60) {
console.log("Grade B");
} else {
console.log("Grade C");
}Loops
Loops repeat code multiple times.
for Loop
for (let i = 1; i <= 5; i++) {
console.log(i);
}while Loop
let i = 1;
while (i <= 5) {
console.log(i);
i++;
}Also Learn
for...of for...in break continueFunctions
Functions allow you to reuse code.
Basic Function
function greet() {
console.log("Welcome!");
}
greet();Function with Parameters
function greet(name) {
console.log("Hello " + name);
}
greet("Ram");Return Value
function add(a, b) {
return a + b;
}
let result = add(10, 20);
console.log(result);Arrow Function
const add = (a, b) => {
return a + b;
};Arrays
Store multiple values inside one variable.
let courses = [
"HTML",
"CSS",
"Bootstrap",
"JavaScript"
];
console.log(courses[0]);Important Methods
push() pop() length map() filter() find() forEach() includes()courses.forEach(function(course) {
console.log(course);
});Objects
Store related information using key-value pairs.
let student = {
name: "Ram",
age: 25,
course: "Computer Science"
};
console.log(student.name);
student.age = 26;Strings
Work with text and string methods.
let message = "Learn JavaScript";
console.log(message.length);
console.log(message.toUpperCase());
console.log(message.toLowerCase());
console.log(message.includes("Java"));
console.log(
message.replace("JavaScript", "CSS")
);Template Literals
let name = "Ram";
let message = `Welcome ${name}`;
console.log(message);DOM – Document Object Model
Learn how JavaScript interacts with HTML.
HTML
<h1 id="heading">
Welcome
</h1>JavaScript
let heading =
document.getElementById("heading");
heading.innerHTML =
"Welcome to JavaScript";Learn
-
document.getElementById() -
document.querySelector() -
document.querySelectorAll()
Changing HTML Content
Change HTML content dynamically using JavaScript.
HTML
<p id="message">
Old Message
</p>
<button onclick="changeMessage()">
Change Message
</button>JavaScript
function changeMessage() {
document.getElementById("message").innerHTML =
"New Message";
}Old Message
Events
JavaScript responds to user actions.
Common events include:
click change input submit keydown keyup mouseoverExample
let button =
document.querySelector("#myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});Changing CSS Using JavaScript
Modify styles dynamically.
let text =
document.getElementById("text");
text.style.color = "blue";
text.style.fontSize = "24px";Using Classes
text.classList.add("highlight");
text.classList.remove("highlight");
text.classList.toggle("highlight");
text.classList.contains("highlight");Creating and Removing Elements
Create, add and remove HTML elements dynamically.
let paragraph =
document.createElement("p");
paragraph.innerHTML = "New Paragraph";
document.body.appendChild(paragraph);
paragraph.remove();Learn
createElement() appendChild() append() remove()Forms and Input Handling
Read user input and respond to form actions.
HTML
<input
type="text"
id="name"
placeholder="Enter your name">
<button id="submitButton">
Submit
</button>JavaScript
document
.getElementById("submitButton")
.addEventListener("click", function() {
let name =
document.getElementById("name").value;
alert("Hello " + name);
});Learn
.value- Form submission
preventDefault()- Basic validation
JavaScript Form Validation
Check user input before processing a form.
let name =
document.getElementById("name").value;
if (name === "") {
alert("Name is required.");
}Practice Validating
Scope
Understand where variables can be accessed.
let globalVariable = "Hello";
function test() {
let localVariable =
"Inside Function";
console.log(localVariable);
}Learn
- Global scope
- Function scope
- Block scope
Error Handling
Handle errors safely in JavaScript programs.
try {
let result = someFunction();
} catch (error) {
console.log(error);
}Modern JavaScript — ES6+
Learn modern syntax and features.
let and const
const website = "My Website";Arrow Functions
const square = number => number * number;Template Literals
let name = "Ram";
console.log(`Hello ${name}`);Destructuring
const student = {
name: "Ram",
age: 25
};
const { name, age } = student;Spread Operator
const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4];JSON
Work with JSON data used by APIs and applications.
const student = {
name: "Ram",
age: 25
};Object → JSON
JSON.stringify(student);JSON → Object
JSON.parse(jsonData);Fetch API
Use JavaScript to get data from an API.
Using Promises
fetch("data.json")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});Async / Await
async function getData() {
try {
const response =
await fetch("data.json");
const data =
await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}Local Storage
Store simple data in the browser.
localStorage.setItem(
"username",
"Ram"
);
let user =
localStorage.getItem("username");
localStorage.removeItem("username");Useful For
- Theme preference
- Simple settings
- Temporary application data
Bootstrap + JavaScript
Combine Bootstrap components with JavaScript.
Modal
Interactive Bootstrap modals.
Dynamic Cards
Create cards using JavaScript.
Forms
Dynamic form validation.
Dynamic Tables
Add and filter table records.
Search / Filter
Filter content dynamically.
Show / Hide
Control page content.
Final JavaScript Practice Projects
1 Digital Counter
Learn:
- Variables
- Events
- DOM
2 To-Do List
Learn:
- Input handling
- Arrays
- DOM manipulation
- Add/remove elements
3 Form Validation
Learn:
- Forms
- Events
- Conditions
- Validation
4 Dynamic Search
| Name | Department |
|---|---|
| Ram | Computer |
| Amit | Mathematics |
| Priya | Science |
Use JavaScript to filter rows dynamically.
5 Image Gallery
Build a dynamic image gallery using JavaScript.
Learn:
- Arrays
- Events
- DOM
- Dynamic content
6 Dynamic Components
- Dark/light mode
- Back-to-top button
- Dynamic navigation
- FAQ show/hide
- Search functionality
Recommended Learning Sequence
Suggested 15-Day Learning Plan
| Day | Topic |
|---|---|
| Day 1 | Introduction + JavaScript Setup |
| Day 2 | Variables + Data Types |
| Day 3 | Operators + Conditions |
| Day 4 | Loops |
| Day 5 | Functions |
| Day 6 | Arrays |
| Day 7 | Objects + Strings |
| Day 8 | DOM Basics |
| Day 9 | Events + DOM Manipulation |
| Day 10 | Forms + Validation |
| Day 11 | Modern JavaScript ES6+ |
| Day 12 | JSON |
| Day 13 | Fetch API + Async/Await |
| Day 14 | Local Storage |
| Day 15 | Build a Complete JavaScript Project |